<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外勤签名</title>
</head>
<script src="./js/flexible.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/flexible.css">
<link rel="stylesheet" href="./css/feld_sign.css">
<link rel="stylesheet" href="./css/style2.css">
<body class="sign">
<section class="clock">
    <div id="clock" class="light">
        <div class="display">
            <div class="date"></div>
            <div class="digits"></div>
        </div>
        <div class="buttons">点我签到</div>
    </div>
</section>

<section class="shop">
    <div class="top"><span class="split"></span>

        <p>今天已去过3个门店</p></div>
    <ul>
        <!--  <li class="scale-1px">
              <div class="left">
                  <div class="logo"><img src="./img/logo.jpg" alt=""></div>
                  <p>古北家乐福</p></div>
              <div class="right">
                  <div class="normal scale-1px">到店：10：00 <img src="./img/img3.jpg" alt=""><img src="./img/img4.jpg" alt=""></div>
                  <div class="abnormal">
                      <button class="scale4-1px-blue">离店签到</button>
                  </div>
              </div>
          </li>
          <li class="scale-1px">
              <div class="left">
                  <div class="logo"><img src="./img/logo.jpg" alt=""></div>
                  <p>古北家乐福</p></div>
              <div class="right">
                  <div class="normal scale-1px">到店：10：00 <img src="./img/img3.jpg" alt=""><img src="./img/img4.jpg" alt=""></div>
                  <div class="normal">离店：10：00 <img src="./img/img3.jpg" alt=""><img src="./img/img4.jpg" alt=""></div>
              </div>
          </li>
          <li class="scale-1px">
              <div class="left">
                  <div class="logo"><img src="./img/logo.jpg" alt=""></div>
                  <p>古北家乐福</p></div>
              <div class="right">
                  <div class="abnormal scale-1px">
                      <button class="scale4-1px-red">异常</button>
                  </div>
                  <div class="normal">离店：10：00 <img src="./img/img3.jpg" alt=""><img src="./img/img4.jpg" alt=""></div>
              </div>
          </li>-->
    </ul>
</section>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <img src="" alt="">
        </div>
    </div>
</div>

<script src="./js/jquery.min.js"></script>
<script src="./js/moment.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://g.alicdn.com/dingding/open-develop/1.1.9/dingtalk.js"></script>
<script>
    dd.config({
        agentId: '${agentId}', // 必填，微应用ID
        corpId: '${corpId}',//必填，企业ID
        timeStamp: ${timeStamp}, // 必填，生成签名的时间戳
        nonceStr: '${nonceStr}', // 必填，生成签名的随机串
        signature: '${signature}', // 必填，签名
        type: 0,   //选填。0表示微应用的jsapi,1表示服务窗的jsapi。不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
        jsApiList: ['runtime.permission.requestAuthCode'] // 必填，需要使用的jsapi列表，注意：不要带dd。
    });
</script>
<script type="text/javascript">
    dd.ready(function () {
        dd.runtime.permission.requestAuthCode({
            corpId: '${corpId}',
            onSuccess: function (info) {
                var code = info.code;
                $.ajax({
                    url: urlConfig + "/access/getList.action",
                    data: {
                        accessToken: '${accessToken}',
                        code: code
                    },
                    type: 'GET',
                    success: function (res, status, xhr) {
                        var html = '';
                        res.jsArray.forEach(function (item, index) {
                            console.log(item)
                            html += '<li class="scale-1px"><div class="left"><div class="logo"><img src="./img/logo.jpg" alt=""></div><p>' + item.shopName + '</p></div>'
                            html += '<div class="right">'
                            if (item.inExceptionId == '') {
                                // 进店有异常
                                html += '<div class="abnormal scale-1px"><button class="scale4-1px-red">异常</button></div>'
                            } else {
                                // 进店有正常
                                html += '<div class="normal scale-1px">到店：' + item.inDutyTime + '<img class="myimg" data-src="' + item.inDutyPhoto + '" src="./img/img3.jpg" alt=""><img class="location" data-latitude="' + item.inLatitude + '" data-longitude="' + item.inLongitude + '" src="./img/img4.jpg" alt=""></div>'
                            }
                            if (item.outExceptionId == '') {
                                // 出店有异常
                                html += '<div class="abnormal"><button class="scale4-1px-red">异常</button></div>'
                            } else if (item.outDutyTime == '') {
                                //离店时间为空
                                html += '<div class="abnormal"><button class="scale4-1px-blue">离店签到</button></div>'
                            }
                            else {
                                // 出店有正常
                                html += '<div class="normal">离店：' + item.outDutyTime + '<img class="myimg" data-src="' + item.outDutyPhoto + '" src="./img/img3.jpg" alt=""><img class="location" data-latitude="' + item.outLatitude + '" data-longitude="' + item.outLongitude + '" src="./img/img4.jpg" alt=""></div>'
                            }
                            html += '</div>'

                        })
                        $('.shop ul').html(html);
                        $('.top').html('<span class="split"></span><p>今天已去过' + res.jsArray.length + '个门店</p>')


                    },
                    error: function (xhr, errorType, error) {
                        logger.e("yinyien:" + '${corpId}');
                        alert(errorType + ', ' + error);
                    }
                });
            },
            onFail: function (err) {
                alert('fail: ' + JSON.stringify(err));
            }
        })
        ;
    })
    ;
    dd.error(function (err) {
        alert('dd error: ' + JSON.stringify(err));
    });
</script>
<script>

    //绑定事件
    $('body').on('click', '.myimg', function () {
        $('.modal').find('img')[0].src = $(this)[0].getAttribute('data-src')
        $('.modal').modal('show')
    })

    $('body').on('click', '.modal-backdrop', function () {
        $('.modal').modal('hide')
    })

    $('body').on('click', '.location', function () {
        alert($(this)[0].getAttribute('data-latitude'))
        alert($(this)[0].getAttribute('data-longitude'))
    })

    $(function () {
        var clock = $('#clock');
        //定义数字数组0-9
        var digit_to_name = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
        //定义星期
        var weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        var digits = {};
        //定义时分秒位置
        var positions = [
            'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
        ];
        //构建数字时钟的时分秒
        var digit_holder = clock.find('.digits');
        $.each(positions, function () {
            if (this == ':') {
                digit_holder.append('<div class="dots">');
            }
            else {
                var pos = $('<div>');
                for (var i = 1; i < 8; i++) {
                    pos.append('<span class="d' + i + '">');
                }
                digits[this] = pos;
                digit_holder.append(pos);
            }
        });
        // 让时钟跑起来
        (function update_time() {
            //调用moment.js来格式化时间
            var now = moment().format("HHmmss");
            digits.h1.attr('class', digit_to_name[now[0]]);
            digits.h2.attr('class', digit_to_name[now[1]]);
            digits.m1.attr('class', digit_to_name[now[2]]);
            digits.m2.attr('class', digit_to_name[now[3]]);
            digits.s1.attr('class', digit_to_name[now[4]]);
            digits.s2.attr('class', digit_to_name[now[5]]);
            var date = moment().format("YYYY年MM月DD日");
            var week = weekday[moment().format('d')];
            $(".date").html(date + ' ' + week);
            // 每秒钟运行一次
            setTimeout(update_time, 1000);
        })();
    }
    //        getAttendanceInfoList();

    /*        $.ajax({
     type: "POST",
     url: 'http://apidoc.useeinfo.com/mockjsdata/6/access/getList.action',
     async: true,
     jsonp: "callback",
     dataType: 'json',
     success: function (res) {
     var html='';
     res.jsArray.forEach(function (item,index) {
     console.log(item)
     html+='<li class="scale-1px"><div class="left"><div class="logo"><img src="./img/logo.jpg" alt=""></div><p>'+item.shopName+'</p></div>'
     html+='<div class="right">'
     if(item.inExceptionId==''){
     // 进店有异常
     html+='<div class="abnormal scale-1px"><button class="scale4-1px-red">异常</button></div>'
     }else{
     // 进店有正常
     html+='<div class="normal scale-1px">到店：'+item.inDutyTime+'<img class="myimg" data-src="'+item.inDutyPhoto+'" src="./img/img3.jpg" alt=""><img class="location" data-latitude="'+item.inLatitude+'" data-longitude="'+item.inLongitude+'" src="./img/img4.jpg" alt=""></div>'
     }
     if(item.outExceptionId==''){
     // 出店有异常
     html+='<div class="abnormal"><button class="scale4-1px-red">异常</button></div>'
     }else if(item.outDutyTime==''){
     //离店时间为空
     html+='<div class="abnormal"><button class="scale4-1px-blue">离店签到</button></div>'
     }
     else{
     // 出店有正常
     html+='<div class="normal">离店：'+item.outDutyTime+'<img class="myimg" data-src="'+item.outDutyPhoto+'" src="./img/img3.jpg" alt=""><img class="location" data-latitude="'+item.outLatitude+'" data-longitude="'+item.outLongitude+'" src="./img/img4.jpg" alt=""></div>'
     }
     html+='</div>'

     })
     $('.shop ul').html(html);
     $('.top').html('<span class="split"></span><p>今天已去过'+res.jsArray.length+'个门店</p>')


     },
     });
     });
     $('body').on('click','.myimg',function () {
     $('.modal').find('img')[0].src=$(this)[0].getAttribute('data-src')
     $('.modal').modal('show')
     })

     $('body').on('click','.modal-backdrop',function () {
     $('.modal').modal('hide')
     })

     $('body').on('click','.location',function () {
     alert($(this)[0].getAttribute('data-latitude'))
     alert($(this)[0].getAttribute('data-longitude'))
     })*/


</script>
</body>
</html>